<template>
  <div  >
<ul class="zinav">
   <li v-for="(v,i) in arr" :key="i">
        <div class="img"><img :src="v.img" alt=""></div>
        
        <router-link :to="v.path">{{v.con}}</router-link>
    </li> 
</ul>

  </div>
</template>

<script>
export default {
    data(){
        return{
            arr:[
                //我的二级导航的路由要是加上了/父路由/子路由，图片找不到，  老师说相对路径有问题，给图片加/
                {con:"首页",img:"img/home1.jpg",path:"/home"},
                {con:"闪光",img:"img/shan.jpg",path:"/shan"},
                {con:"话题",img:"img/huati.jpg",path:"/huati"},
                {con:"朕知道",img:"img/zhen.jpg",path:"/zhen"},
                {con:"我的",img:"img/wode.jpg",path:"/wode"}
            ]
        }
    }
}
</script>

<style scoped>
.zinav{
  width: 100%;
  height:0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  bottom: 0;
}

li{
    width: 0.5rem;
    height: auto;
    display: flex;
    flex-direction: column;
    text-align: center;
}
a{
     font-size: 0.14rem;
}
li:hover a{
    color:orange;
   font-size: 16px;
}
/* .router-link-active{
    color:orangered;
    font-size: 0.16rem;
} */
img{
    width: 0.2rem;
    height: 0.2rem;
}

</style>